@use 'sass:map';
@use 'sass:color';

.asset-home-box {
  position: relative;
  display: block;
  height: calc(100vh - 105px);
  overflow: hidden;

  #asset-home-map {
    height: 100%;
  }

  .asset-home-search {
    position: absolute;
    top: map.get($spacing, 'secondGear');
    left: 5px;
    transition: left 0.2s;

    .asset-home-search-form {
      display: flex;
      gap: 16px;

      .asset-home-search-form-item {
        width: 240px;

        :global {
          .el-input-group__prepend {
            padding: 0;
          }
        }
      }
    }
  }

  .asset-home-options-bar {
    position: absolute;
    bottom: map.get($spacing, 'secondGear');
    left: 0;
    transition: left 0.2s;

    :global(.el-card__body) {
      padding: 0 calc(map.get($spacing, 'firstGear') / 2) 0 map.get($spacing, 'secondGear');
    }

    .asset-home-options-bar-icon {
      width: 24px;
      height: 24px;
    }
  }

  .asset-home-zoom {
    position: absolute;
    bottom: map.get($spacing, 'fifthGear') + map.get($spacing, 'thirdGear');
    right: map.get($spacing, 'secondGear');
    transition: bottom var(--el-transition-duration);

    &.asset-home-zoom-expand {
      bottom: 400px + map.get($spacing, 'fourthGear');
    }

    :global {
      .el-card__body {
        padding: map.get($spacing, 'firstGear');
      }

      .zoom-number-card {
        font-size: map.get($font-size, 'small');
        width: 35px;
        height: 30px;
        line-height: 1.2;
        text-align: center;
      }

      .zoom-option-card {
        .el-card__body {
          padding-bottom: 0;
        }

        .el-divider {
          margin: 0;
        }
      }
    }
  }

  .asset-home-zoom-over {
    position: absolute;
    right: 212px;
    bottom: 16px;
    width: 85px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;

    &:hover {
      color: #4073ff;
    }
  }

  .asset-home-zoom-over-actions {
    color: #4073ff;
  }

  .asset-home-graphic-example {
    position: absolute;
    bottom: map.get($spacing, 'secondGear');
    right: map.get($spacing, 'secondGear');
    width: 192px;
    height: 400px;

    &.asset-home-graphic-example-packUp {
      height: map.get($spacing, 'fifthGear');

      :global(.el-card__body) {
        height: 0;
        padding: 0;
      }
    }

    :global(.text-one-line-overflow) {
      width: 130px;
      font-size: map.get($font-size, 'small');
    }

    .asset-home-graphic-example-icon {
      vertical-align: sub;
      width: 14px;
      height: 14px;
    }

    .asset-home-graphic-example-text {
      color: #999;
    }
  }
}
